import React from 'react';
import { View, Text } from '@ray-js/ray';
import Strings from '@/i18n';
import styles from './index.module.less';

type GetLangParamType = Parameters<typeof Strings.getLang>[0];
const weekData = [...new Array(7).keys()].map(i => ({
  key: i,
  name: Strings.getLang(`week${i}` as GetLangParamType),
}));

interface Props {
  weeks: number[];
  onChange?: (weeks: number[]) => void;
  style?: React.CSSProperties;
}
export class Weeks extends React.Component<Props> {
  handleClick = index => () => {
    const { weeks, onChange } = this.props;
    const newWeeks = [...weeks];
    newWeeks[index] = newWeeks[index] ? 0 : 1;
    if (typeof onChange === 'function') {
      onChange(newWeeks);
    }
  };

  render() {
    const { weeks, style } = this.props;
    return (
      <View className={styles.weekBox} style={style}>
        {weekData.map(({ key, name }) => {
          const isActive = !!weeks[key];
          return (
            <View
              onClick={this.handleClick(key)}
              key={key}
              style={{
                backgroundColor: isActive ? '#60B8BF' : '#1C72A1',
              }}
              className={styles.weekItem}
            >
              <Text
                style={{
                  color: isActive ? '#fff' : '#222',
                  fontSize: `24rpx`,
                }}
              >
                {name}
              </Text>
            </View>
          );
        })}
      </View>
    );
  }
}

export default Weeks;
